<template>
  <div class="flex-main">
    <div class="flex-body">
      <div class="m-content">
        <div class="m-card">
          <div class="card-box card-discount" v-if="ChuzhiCard.length">
            <div class="card-name">储值卡</div>
            <div class="card-info">
              <div class="info-cell underline" v-for="(item,index) in ChuzhiCard">
                <div class="cell-right" v-if="item.CardKindNo == '005'">[{{item.OpenCard}}~{{item.EffectiveDate}}]</div>
                <div class="cell-right" v-else>{{item.Balance}}</div>
                <div class="cell-left">{{item.CardType}}</div>
              </div>
            </div>
            <div class="card-ft">
              <!--<div class="ft-use">查看使用记录</div>-->
            </div>
          </div>
          <div class="card-box card-course" v-if="LiaochengCard.length">
            <div class="card-name">疗程卡</div>
            <div class="card-info">
              <div class="info-cell underline" v-for="(item,index) in LiaochengCard">
                <div class="cell-hd" @click="showDetail($event)">
                  <!--<div class="hd-right">{{$value.SurplusQuantity}}次/{{$value.Quantity}}次</div>-->
                  <div class="hd-right">{{item.SurplusQuantity}}次</div>
                  <div class="hd-left">{{item.CardType}}</div>
                </div>
                <div class="cell-list">
                  <div class="list-item" v-for="(item2,index2) in item.detail">
                    <div class="item-right">{{item2.SurplusQuantity}}次/{{item2.Quantity}}次</div>
                    <div class="item-left">{{item2.ProjectName}}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="card-ft">
              <!--<div class="ft-use">查看使用记录</div>-->
            </div>
          </div>
          <div class="card-box card-product" v-if="StoreGoods.length">
            <div class="card-name">品项赠送+产品寄存</div>
            <div class="card-info">
              <div class="info-cell underline" v-for="(item,index) in StoreGoods">
                <div class="cell-right">{{item.SurplusQuantity}}</div>
                <div class="cell-left">[{{item.Style}}]{{item.GoodsNameOrProject}}</div>
              </div>
            </div>
            <div class="card-ft">
              <!--<div class="ft-use">查看使用记录</div>-->
            </div>
          </div>
          <div class="card-box card-nopay" v-if="CardNonePay.length">
            <div class="card-name">未付款</div>
            <div class="card-info">
              <div class="info-cell underline" v-for="(item,index) in CardNonePay">
                <div class="cell-right">{{item.NonePay}}</div>
                <div class="cell-left">[{{item.Style}}]{{item.CardType}}</div>
              </div>
            </div>
            <div class="card-ft">
              <!--<div class="ft-use">查看使用记录</div>-->
            </div>
          </div>
          <no-data :title="'暂无余额信息'" v-if="!ChuzhiCard.length && !LiaochengCard.length && !StoreGoods.length && !CardNonePay.length"></no-data>
        </div>
      </div>
    </div>
    <footer-nav class="flex-bottom" :title="4"></footer-nav>
  </div>
</template>
<script>
  import {
    getCardDetail,
  } from "@/api/mine.js";
  export default {
    data() {
      return {
        CustomerID: this.$utils.uid,
        ChuzhiCard: [],
        LiaochengCard: [],
        StoreGoods: [],
        CardNonePay: [],
      }
    },
    methods: {
      //点击疗程卡显示或隐藏
      showDetail(e) {
        var $list = e.currentTarget.nextElementSibling;
        if ($list.style.display == 'block') $list.style.display = 'none';
        else $list.style.display = 'block';
      },
    },
    mounted() {
      getCardDetail({
        CustomerId: this.CustomerID
      }).then(res => {
        this.ChuzhiCard = res.ChuzhiCard;
        this.LiaochengCard = res.LiaochengCard;
        this.StoreGoods = res.StoreGoods;
        this.CardNonePay = res.CardNonePay;
      })
    },

    components: {
      noData: () => import('@/components/noData'),
    }
  }

</script>
<style lang="less" scoped src="@/less/mine/myRemainder.less"></style>
